<template>
  <div class="history-invoice">

    <account-card title="申请发票"/>

    <el-table
        :data="tableData"
        style="width: 100%"
    >
      <el-table-column
          v-for="item of tableAry"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align='item.align'
          :key="item.prop"
      >
        <div v-if="item.render" slot-scope="scope">
          <el-tag :type="scope.row[item.prop]" effect="dark">{{handleStatus(scope.row[item.prop])}}</el-tag>
        </div>
        <div v-else slot-scope="scope">
          {{scope.row[item.prop]}}
        </div>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import AccountCard from "../../account/components/AccountCard"
  import {getHistoryInvoiceList} from "@/api/service"

  const tableAry = [
    {
      prop: 'makeInvoiceTime',
      label: '申请时间',
      width: '110',
      align: 'left'
    },
    {
      prop: 'invoiceTitle',
      label: '发票抬头',
    },
    {
      prop: 'invoiceMoney',
      label: '发票金额',
    },
    {
      prop: 'invoiceType',
      label: '发票性质',
    },
    {
      prop: 'invoiceStatus',
      label: '开票状态',
      render: true
    },
    {
      prop: 'expressNo',
      label: '快递单号',
      width: '120',
    },
    {
      prop: 'express',
      label: '快递公司',
      width: '80',
      align: 'right'
    }
  ]

  export default {
    data() {
      return {
        tableAry,
        tableData: [
          {
            makeInvoiceTime: '2016-05-02',
            invoiceTitle: '掌阅',
            invoiceMoney: '1008611',
            invoiceType: '版权',
            invoiceStatus: 'success',
            expressNo: 'sfyihbkhckzhsbsj',
            express: '顺丰'
          },
          {
            makeInvoiceTime: '2021-05-02',
            invoiceTitle: '梅萨德斯',
            invoiceMoney: '1008611',
            invoiceType: '过户',
            invoiceStatus: 'danger',
            expressNo: 'sfyihbkhckzhsbsj',
            express: '顺丰'
          }
        ]
      }
    },
    components: {
      AccountCard
    },
    created() {
      this.getHistoryInvoiceList()
    },
    methods: {
      async getHistoryInvoiceList() {
        let result = await getHistoryInvoiceList();
        this.handleResult(result, () => {
          this.tableData = result.data
        })
      },
      handleStatus(type) {
        const obj = {
          'success': '成功',
          info: ' 申请中',
          danger: '失败',
        }
        return obj[type]
      }
    }
  }
</script>

<style scoped lang="scss">
  .history-invoice {
    .account_card {
      background: #EDD9B6;
      margin-bottom: 11px;
    }

    ::v-deep th {
      background: #EEEEEE;
    }
  }
</style>